<template>
  <div class="print" :style="opened ? 'left:210px' : 'left:70px'">
    <div class="title">
      <div>
        打印
      </div>
      <i class="el-icon-close" @click="colse"></i>
    </div>
    <div class="content">
      <div id="printMe" class="printMe" ref="print">
        <div
          style="page-break-after:always; margin-bottom: 30px;"
          v-for="(item, index) in data"
          :key="index"
          class="ll"
        >
          <div class="name">{{ item.name }}</div>
          <img :id="'barcode' + index" />
          <div class="code">
            <span style="margin-right:30px">{{ item.GZ }}</span>
            <span>{{ item.row }}</span>
          </div>
          <div class="passageway">
            {{ item.passageway }}
          </div>
          <div>
            <span style="margin-right:30px">{{ item.way }}</span>
            <span>{{ item.date }}</span>
          </div>
          <div>
            <span style="margin-right:30px">{{ item.passway }}</span>
            <span>{{ item.status }}</span>
          </div>
          <div class="footer">第{{ index + 1 }}页</div>
        </div>
      </div>
      <el-button size="medium" type="primary" class="printBtn" @click="print"
        >打印</el-button
      >
    </div>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
export default {
  name: "print",
  data() {
    return {
      // opened:this.$store.getters.sidebar.opened
    };
  },
  props: {
    data: {
      type: Array
    }
  },
  computed: {
    opened() {
      return this.$store.getters.sidebar.opened;
    }
  },
  methods: {
    print() {
      console.log(this.$printJs);
      this.$printJs.printByEle(this.$refs.print);
      this.$printJs.getStyle(this.$refs.print);
    },
    colse() {
      this.$emit("colse");
    }
  },
  mounted() {
    this.data.map((item, index) => {
      JsBarcode("#barcode" + index, item.GZ, {
        format: "CODE39",
        lineColor: "#000",
        background: "#ffffff",
        width: 2,
        height: 60,
        displayValue: false
      });
    });
  }
};
</script>

<style lang="scss" scoped>
.print {
  position: fixed;
  top: 43px;
  right: 0;
  bottom: 0;
  background: rgba($color: #ffffff, $alpha: 1);
  transition: all 0.28s;
  overflow: auto;
  z-index: 999999;
  .title {
    width: 100%;
    height: 60px;
    background: #4476a7;
    line-height: 60px;
    color: white;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .ll {
    padding: 20px 120px;
    font-size: 16px;
    .name {
      font-size: 20px;
    }
  }
  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
  }
}
.printBtn {
  position: fixed;
  top: 120px;
  right: 50px;
  z-index: 99999999;
  line-height: 35px;
  height: 35px;
}
@media print {
  .ll {
    padding: 15px;
    font-size: 18px;
    .name {
      font-size: 28px;
    }
  }
  .footer {
    display: none;
  }
}
</style>
